<template>
  <div class="edit_container">
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    >
    </quill-editor>
    <!-- <button v-on:click="saveHtml" class="savebtn" >{{choice}}</button> -->
  </div>
</template> 
<script>
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  //   [{ header: 1 }, { header: 2 }],
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }],
  [{ size: [] }], // 配置字号
  //   [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], //显示字体选择
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  ["image"], // 链接、图片、视频-----['link', 'image', 'video']
];

export default {
  props: {
    choice: { type: String, required:true },//组件间传参
  },

  name: "TextEditing",
  data() {
    return {
      content: ``,

      // 富文本编辑器配置
      editorOption: {
        theme: "snow",
        modules: {
          toolbar: toolbarOptions,
        },
      },
    };
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },

  methods: {
    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {
      // 失去焦点事件
    },
    onEditorFocus() {
      // 获得焦点事件
    },
    onEditorChange() {
      // 内容改变事件
    },
    saveHtml() {
      console.log("submit");
    },
  },
};
</script>   
<style>
.edit_container {
  /* font-family: "Avenir", Helvetica, Arial, sans-serif; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.ql-editor {
  height: 300px;
}
.savebtn {
  /* font-family: "华文楷体"; */
  display: inline-block;
  text-transform: uppercase;
  font-weight: normal;
  font-style: normal;
  font-size: 1.2em;
  letter-spacing: 0.3em;
  color: rgba(243, 14, 45, 0.7);
  border-radius: 0;
  padding: 9px 40px 10px;
  -webkit-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
  background: -webkit-linear-gradient(
    180deg,
    rgba(9, 98, 233, 0.8),
    rgba(33, 73, 133, 0.8),
    rgba(44, 18, 116, 0),
    rgba(14, 13, 13, 0)
  );
  background: linear-gradient(
    270deg,
    rgba(9, 98, 233, 0.8),
    rgba(33, 73, 133, 0.8),
    rgba(44, 18, 116, 0),
    rgba(12, 12, 12, 0)
  );
  background-position: 1% 50%;
  background-size: 300% 300%;
  text-decoration: none;
  margin: 0.625rem;
  border: none;
  border: 2px solid rgba(7, 7, 7, 0.3);
}

.savebtn:hover {
  font-weight: bolder;

  border: 1px solid rgba(223, 190, 106, 0);
  color: rgb(250, 249, 249);
  background-position: 99% 50%;
}
</style>